<template>
  <div>
    <!-- 新增 -->
    <div class="mt20"></div>
    <div class="bor7 pa15 ">

        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <th>时间</th>
                <th>消息类型</th>
                <th>消息详情</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              <tr v-for="item in this.defaultSList" :key="item.id">
                <td>{{ item.create_time | formatDate }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.content | contentText}}</td>
                <td v-if="item.status == 1">已读</td>
                <td v-else>未读</td>
                <td>
                  <router-link
                    :to="{
                      path: '/information_details',
                      query: { id: item.id },
                    }"
                    class="primary"
                    >详情</router-link
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div class="block ta">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :pager-count="5"
            :total="defaultinfo.total"
            v-if="defaultinfo.pages > 1"
          >
          </el-pagination>
          <el-empty description="暂无数据"  v-if="defaultinfo.pages == 0"></el-empty>
        </div>
  </div>
  </div>
</template>


<script>
import { formatDate } from "../../assets/data.js";
export default {
  data() {
    return {
      activeName: "first",
      defaultSList: [],
      defaultinfo: [],
      page_size: 20, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      sort: "create_time",
      keyword: "",
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
    };
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },

  },
  mounted() {
    this.getAllSList();
  },
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    getAllSList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/message/index?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=status:1;"
        )
        .then(function (response) {
          that.defaultSList = response.data.data.data;
          that.defaultinfo = response.data.data.page;
          //console.log(that.defaultSList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllSList();
    },
    defaultSearch() {
      ////console.log(this.keyword);
      this.getAllSList();
    },
  },
};
</script>

<style scoped>
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.el-tabs__content .el-tab-pane {
  background: #fff;
  padding: 1.25rem;
  border-radius: 0.4375rem;
}
.table th {
  border-top: none;
  background: #f6f5f5;
  font-size: 0.875rem;
  color: #545556;
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
table tr td {
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
  border-top: none;
  border-bottom: 1px solid #f6f5f5;
}
.el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
</style>
